<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item,index) in  cartVo.items" :key="index">
					<view class="check" @click="updateSelect(item.skuId,item.check)">
						<text v-if="!item.check" class="iconfont icon-check"></text>
						<u-icon v-else name="checkbox-mark" color="#2979ff" size="28"></u-icon>
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.title}}</text>
							</view>
							<view class="attribute">
								<view class="attr" v-for="(i,j) in item.skuAttrValues">
									<text>{{i}}</text>
								</view>
							</view>
							<view class="price-num">
								<view class="price">
									<text class="min">￥</text>
									<text class="max">{{item.totalPrice}}</text>
								</view>
								<view class="num">
									<u-number-box v-model="item.count" @change="valChange(item.count,item.skuId)">
									</u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 为你推荐 -->
			<view class="recommend-info">
				<view class="recommend-title">
					<view class="title">
						<image src="/static/wntj_title.png" mode=""></image>
					</view>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods')" :key="index">
						<view class="pictrue">
							<image :src="item.img" mode="heightFix"></image>
						</view>
						<view class="title-tag">
							<view class="tag">
								<text v-if="item.is_goods === 1">特价</text>
								{{item.name}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
							</view>
							<view class="vip-price">
								<image src="/static/vip_ico.png"></image>
								<text>￥{{item.vip_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="close-account">
				<view class="check-total">
					<view class="check">
						
						
						<text v-if="isSelectAll" class="iconfont icon-check"  @click="selectAll()"></text>
						<u-icon v-else name="checkbox-mark" color="#2979ff" size="28"  @click="selectAll()"></u-icon>
						<text class="all">全选</text>
						
						
					</view>
					<view class="total">
						<text>合计：</text>
						<text class="price">￥{{cartVo.totalAmount}}</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit">
						<text>去结算({{cartVo.countNum}})</text>
					</view>
					<view class="btn-del" v-else>
						<text class="attention">移入关注</text>
						<text class="del">删除</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				isSelectAll:false,
				isEdit: false,
				goodsList: [{
					id: 1,
					name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
					price: '219.00',
					vip_price: '129.00',
					img: '/static/img/goods_thumb_01.png',
					is_goods: 0,
				}, {
					id: 1,
					name: '荣耀Play4T 全网通6GB+128GB大内存 幻夜黑 4000mAh大电池 4800万AI摄影  6.39英寸魅眼屏',
					price: '1190.00',
					vip_price: '1100.00',
					img: '/static/img/goods_thumb_11.png',
					is_goods: 0,
				}, ],

				"cartVo": {
					"items": [{
						"skuId": 1,
						"check": true,
						"title": "华为 HUAWEI P40 Pro+ 麒麟990 5G  流光幻镜 套餐二 麒麟990 5G SoC芯片 5000万超感知徕卡五摄 100倍双目变焦 全网通5G",
						"image": "https://mall-fire.oss-cn-shenzhen.aliyuncs.com/2020-06-05/e5ba78ec-9cf5-4bbd-86a7-ad2f611e2512_图集1.jpg",
						"skuAttrValues": [
							"颜色：流光幻镜",
							"套餐：套餐二"
						],
						"price": 8888,
						"count": 2,
						"totalPrice": 17776
					}],
					"countNum": 2,
					"countType": 1,
					"totalAmount": 17776,
					"reduce": 0
				}
			};
		},
		onReady() {
			uni.hideTabBar()
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			valChange(id, num) {
				console.log('当前值为: ' + id)
				console.log(num);
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			// 修改是否选中
			updateSelect(id,check)
			{
				console.log("点击id"+id);
				console.log("check"+check);
				
			},
			// 选中全部
			selectAll()
			{
				console.log("id");
			},
			
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>
